<template>
	<div>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="2">
						<el-button type="default" @click="downloadOrder()" round size="mini">导出</el-button>
					</el-col>
					<el-col :span="22">
						<el-form :inline="true" :model="ruleForm" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item>
								<el-input v-model="task_sn" placeholder="任务编号"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="staff_name" placeholder="接单人" class="w_80"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="mobile" placeholder="手机号" class="w_110"></el-input>
							</el-form-item>
							<el-form-item>
								<el-autocomplete
									size="mini"
									class="w_130"
									v-model="shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
							<el-form-item>
								<el-select v-model="type_arr" placeholder="岗位" @change="changeBtndialogtype" class="w_80">
									<el-option
										v-for="item in TypeArr"
										:key="item.id"
										:label="item.label_name"
										:value="`${item.id}|${item.label_name}`"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-select v-model="status" placeholder="任务状态" class="w_100">
									<el-option label="待分配" value="10"></el-option>
									<el-option label="待下发" value="15"></el-option>
									<el-option label="已下发" value="20"></el-option>
									<el-option label="已确认" value="30"></el-option>
									<el-option label="已签到" value="40"></el-option>
									<el-option label="已完成" value="50"></el-option>
									<el-option label="已结算" value="80"></el-option>
									<el-option label="已撤回" value="60"></el-option>
									<el-option label="已取消" value="70"></el-option>
								</el-select>
							</el-form-item>
							<!-- <el-form-item prop="datetime1">
                                <el-form-item prop="date1">
									<el-date-picker
										class="w_160i"
										v-model="ruleForm.date1"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										format="yyyy-MM-dd HH:mm"
										placeholder="开始时间">
									</el-date-picker>
								</el-form-item>
                            </el-form-item>~
                            <el-form-item prop="datetime2">
                                <el-form-item prop="date2">
									<el-date-picker
										class="w_160i"
										v-model="ruleForm.date2"
										type="datetime"
										value-format="yyyy-MM-dd HH:mm:ss"
										format="yyyy-MM-dd HH:mm"
										placeholder="结束时间">
									</el-date-picker>
								</el-form-item>
                            </el-form-item> -->

							<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<!-- 表格部分 -->
					<el-table :data="demandList" stripe>
						<el-table-column prop="task_sn" label="任务编号" width="150px">
							<template slot-scope="{ row, $index }">
								<span class="pointer u text-primary" @click="goToMore(row)">{{ row.task_sn }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="shop_name" label="店铺名称" width="200">
							<template slot-scope="{ row, $index }">
								<el-link type="primary" @click="goShopCont(row)">{{ row.shop_name }}</el-link>
							</template>
						</el-table-column>
						<el-table-column prop="area_name" label="商圈"></el-table-column>
						<el-table-column prop="label_name" label="任务名称" width="140px">
							<template slot-scope="{ row, $index }">
								<span class="pointer u">{{ row.job_name }} {{ row.hour_expect }}h</span>
							</template>
						</el-table-column>
						<el-table-column prop="task_description" label="任务备注"></el-table-column>
						<el-table-column prop="hour_actual" width="90px" label="实际时长"></el-table-column>
						<el-table-column prop="status" label="状态" width="120px">
							<template slot-scope="{ row, $index }">
								<span class="text-success" v-if="row.status == '10'">待分配</span>
								<span class="text-primary" v-if="row.status == '15'">待下发</span>
								<span class="text-primary" v-if="row.status == '20'">已下发</span>
								<span class="text-gray" v-if="row.status == '30'">已确认</span>
								<span class="text-warning" v-if="row.status == '40'">已签到</span>
								<span class="text-warning" v-if="row.status == '50'">已完成</span>
								<span class="text-default" v-if="row.status == '60'">已撤回</span>
								<span class="text-danger" v-if="row.status == '70'">已取消</span>
								<span class="text-success" v-if="row.status == '80'">已结算</span>
							</template>
						</el-table-column>
						<el-table-column prop="total" label="接单人" width="150px">
							<template slot-scope="{ row, $index }">
								<span>{{ row.staff_name }} {{ row.mobile }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="start_date" label="任务开始/结束时间" width="200px">
							<template slot-scope="{ row, $index }">
								<span>{{ row.start_date }}/{{ row.start_time }}-{{ row.end_time }}</span>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../../static/tool.js')
export default {
	name: 'ShopList',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			//搜索对应值
			task_sn: '', //任务编号
			staff_name: '', //接单人
			mobile: '', //手机号
			area_arr: '', //商圈信息
			type_arr: '', //需求信息
			label_id: '',
			label_name: '',
			shop_id: '', //店铺id
			shop_name: '', //店铺名
			status: '',
			time_type: '2', //时间类型选择
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},

			TypeArr: '',
			demandList: [], //任务列表
			//向分页组件传值
			total: 0,
			pageNum: '',
			pageSizeNow: '',
			// 审核状态
			text: '',
			shopList: [], //店铺列表

			work_date: '',
			area_id: '',
			area_name: '',
			date_time: '',
			taskList: ''
		}
	},
	props: {
		row_ids: {
			type: String
		},
		area_ids: {
			type: String
		},
		area_names: {
			type: String
		},
		work_dates: {
			type: String
		},
		date_times: {
			type: String
		},
		taskLists: {
			type: String
		}
	},
	watch: {
		row_ids: {
			handler: function (newValue, oldValue) {
				// console.log(newValue)
				// console.log(this.work_dates)
				this.work_date = this.work_dates
				this.area_id = this.area_ids
				this.area_name = this.area_names
				this.date_time = this.date_times
				this.taskList = this.taskLists
				if (this.taskLists != '') {
					this.pageNum = 1
					this.listShop()
				}
			},
			deep: true
		}
	},
	created() {
		//时间的默认选中
		// var d = this.date(0);
		// this.ruleForm.date1 = d+' 00:00:00';
		// var e = this.date(3);
		// this.ruleForm.date2 = e+' 23:59:00';
	},
	mounted() {
		this.listUser() //店铺列表
		this.alljob_type()
		// this.listArea();//区域列表
	},
	methods: {
		date(e) {
			return this.$moment().add('days', e).format('YYYY-MM-DD')
		},
		listUser() {
			//获取商铺列表
			let fn = new FormData()
			fn.append('sign_status', 30) //已合作的店铺
			fn.append('status', 1) //启用的店铺
			// fn.append("search_list", 1); //不进行分页
			this.$http.post(this.url + '/shop/getListForSearch', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.shopList = res.data.data.list
						} else {
							this.shopList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		listShop() {
			//获取任务列表
			//判断时间框是否存在值
			// if (
			//     this.ruleForm.date1 == null || //城市
			//     this.ruleForm.date2 == null //商圈
			// ) {
			//     this.$message.error("请选择任务开始时间及结束时间！");
			//     return;
			// }

			let fn = new FormData()
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数
			fn.append('task_sn', this.task_sn)
			fn.append('staff_name', this.staff_name)
			fn.append('mobile', this.mobile)
			fn.append('shop_id', this.shop_id)
			fn.append('area_id', this.area_id)
			fn.append('label_id', this.label_id)
			if (this.status == '') {
				var status_new = '10,15,20,30,40,50,60,80'
				fn.append('status', status_new)
			} else {
				fn.append('status', this.status)
			}
			fn.append('time_type', this.time_type)

			var dateTime = new Date(this.work_date)
			dateTime = dateTime.setDate(dateTime.getDate() + 1)
			dateTime = new Date(dateTime)
			var day = dateTime.getDate()
			var month = dateTime.getMonth() + 1
			if (month < 10) {
				month = '0' + month
			}
			if (day < 10) {
				day = '0' + day
			}
			var work_date2 = dateTime.getFullYear() + '-' + month + '-' + day

			if (this.date_times == 0) {
				//全天
				fn.append('start_time', this.work_date + ' 05:00:00')
				fn.append('end_time', work_date2 + ' 04:59:00')
			} else if (this.date_times == 1) {
				//早班
				fn.append('start_time', this.work_date + ' 05:00:00')
				fn.append('end_time', this.work_date + ' 09:59:00')
			} else if (this.date_times == 2) {
				//中班
				fn.append('start_time', this.work_date + ' 10:00:00')
				fn.append('end_time', this.work_date + ' 14:59:00')
			} else if (this.date_times == 3) {
				//晚班
				fn.append('start_time', this.work_date + ' 15:00:00')
				fn.append('end_time', this.work_date + ' 20:59:00')
			} else if (this.date_times == 4) {
				//夜班
				fn.append('start_time', this.work_date + ' 21:00:00')
				fn.append('end_time', work_date2 + ' 04:59:00')
			}

			this.$http.post(this.url + '/task/list', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功！' || res.data.code == '200') {
						if (res.data.data != null) {
							this.demandList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.demandList = []
							this.total = 0
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			if (this.taskLists != '') {
				this.listShop()
			}
		},

		resetBtn() {
			//重置
			this.resetData() //重置请求数据
			this.pageNum = 1
			if (this.taskLists != '') {
				this.listShop()
			}
		},

		resetData() {
			//重置请求数据
			this.pageNum = 1
			this.task_sn = ''
			this.staff_name = ''
			this.mobile = ''
			this.type_arr = ''
			this.label_id = ''
			this.label_name = ''
			// this.area_arr = '';
			// this.area_id = '';
			// this.area_name = '';
			this.business_id = ''
			this.business_name = ''
			this.shop_id = ''
			this.shop_name = ''
			this.status = ''
			this.time_type = 2
			//时间的默认选中
			// var d = this.date(0);
			// this.ruleForm.date1 = d+' 05:00:00';
			// var e = this.date(2);
			// this.ruleForm.date2 = e+' 04:59:00';
		},

		//跳转任务详情
		goToMore(row) {
			const { href } = this.$router.resolve({
				path: '/roleMain',
				query: {
					rl_id: row.demand_id,
					rl_sn: row.demand_sn,
					task_id: row.id,
					task_sn: row.task_sn,
					start_date: row.start_date
				}
			})
			window.open(href, '_blank')
		},

		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			// console.log(item);
			this.shop_id = item.id
		},

		// 跳转店铺详情
		goShopCont(row) {
			const { href } = this.$router.resolve({ path: '/shopTag', query: { id: row.shop_id } })
			window.open(href, '_blank')
		},

		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			if (this.taskLists != '') {
				this.listShop()
			}
		},
		//导出
		downloadOrder() {
			if (this.status == '') {
				var status_new = '10,15,20,30,40,50,60,80'
				this.status = status_new
			}
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				task_sn: this.task_sn,
				// demand_sn : this.demand_sn,
				staff_name: this.staff_name,
				mobile: this.mobile,
				shop_id: this.shop_id,
				area_id: this.area_id,
				label_id: this.label_id,
				status: this.status,
				time_type: this.time_type,
				start_time: this.work_date + ' 00:00:00',
				end_time: this.work_date + ' 23:59:00'
			}
			let param = $.param(obj)
			window.location.href = this.url + '/task/exportList?' + param
		},
		changeBtndialogtype() {
			let [id, name] = this.type_arr.split('|') // es6 数组解构赋值
			this.label_id = id
			this.label_name = name
		},
		//标签接口
		alljob_type() {
			let fn = new FormData()
			fn.append('label_type', 'job_type')
			this.$http.post(this.url + '/label/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.TypeArr = res.data.data
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		changeBtndialogarea() {
			let [id, name] = this.area_arr.split('|') // es6 数组解构赋值
			this.area_id = id.toString()
			this.area_name = name.toString()
		}
	},
	filters: {
		ReversalTime: function (value) {
			value = value % 24
			return common.getReversalTime(value)
		}
	}
}
</script>

<style scoped>
/* .search_box{width:790px;} */
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
.main_user {
	background: var(--zfy-red);
	color: #fff;
	text-decoration: none;
	padding: 2px 4px;
	border-radius: 4px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}
</style>



// WEBPACK FOOTER //
// src/components/abnormal/components/One.vue